<template>
  <!-- 配置表头 -->
  <div
    :style="`display:flex;justify-content: ${allAlign};gap:${gap}px;    align-items: flex-start;`"
  >
    <div
      class="config-table-header"
      :style="`justify-content:${align};gap:${gap}px`"
      v-if="mergeList[0].length != 0"
    >
      <div
        v-for="(item, index) in mergeList[0]"
        :key="index"
        class="table-header-item"
      >
        <span
          v-if="item.label"
          :style="`width:${item.labelWidth}px;text-align:right `"
          >{{ item.label }}</span
        >
        <!-- 输入框 -->
        <Input
          v-if="item.type === 'input'"
          v-model="form[`${item.prop}`]"
          :placeholder="item.placeholder || '请输入'"
          :style="`width:${item.width}px`"
          :type="item.inputType || 'text'"
          :disabled="item.disabled || false"
          @keyup.enter.native="emitMethod(item.enterMethod || '')"
          @on-blur="emitMethod(item.method || '')"
          clearable
        />
        <!-- :clearable="item.clearable === false ? false : true" -->
        <!-- 选择器 -->
        <Select
          v-if="item.type === 'select'"
          v-model="form[`${item.prop}`]"
          :placeholder="item.placeholder || '请选择'"
          :disabled="item.disabled || false"
          :clearable="item.clearable === false ? false : true"
          :multiple="item.multiple || false"
          :filterable="item.filterable || true"
          :default-first-option="true"
          :allow-create="item.allowCreate || false"
          :style="`width:${item.width}px`"
          @on-change="emitMethod(item.method || '')"
        >
          <!-- 这里需要你传入该单选循环的数组 -->
          <Option
            v-for="_item in item.options"
            :key="_item[item.optionValue || 'value']"
            :value="_item[item.optionValue || 'value']"
          >
            {{ _item[item.optionLabel || "label"] }}
          </Option>
        </Select>
        <!-- 按钮 -->
        <Button
          v-if="item.type === 'button'"
          :type="item.btnType || 'primary'"
          @click="emitMethod(item.method || '')"
          >{{ item.text }}</Button
        >
        <!-- 日期选择器  因为不允许使用值的 format，所以使用这样的方式 $attrs -->
        <DatePicker
          v-model="form[`${item.prop}`]"
          v-if="item.type === 'datePicker'"
          :type="item.dateType || 'date'"
          :placeholder="item.placeholder || '选择日期'"
          :format="item.format || 'yyyy-MM-dd'"
          :model-value="item.valueFormat || 'yyyy-MM-dd'"
          :range-separator="item.separator || '至'"
          :start-placeholder="item.startPlaceholder || '开始日期'"
          :end-placeholder="item.endPlaceholder || '结束日期'"
          :default-time="item.defaultTime || false"
          :style="`width:${item.width}px`"
          :key="pickerKey"
          v-bind="$attrs"
          v-on="$listeners"
        >
        </DatePicker>
        <!-- 预留一个插槽 -->
        <slot></slot>
      </div>
    </div>
    <div
      class="config-table-header"
      :style="`justify-content:${align};gap:${gap}px;flex-shrink: 0;`"
    >
      <div
        v-for="(item, index) in mergeList[1]"
        :key="index"
        class="table-header-item"
      >
        <Button
          :type="item.btnType || 'primary'"
          @click="emitMethod(item.method || '')"
          >{{ item.text }}</Button
        >
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Ids26AdminH5TableHeader",

  props: {
    headerConfig: {
      type: Array,
      default: () => [],
    },
    form: {
      type: Object,
      default: () => {},
    },
    align: {
      type: String,
      default: () => "flex-start",
    },
    gap: {
      type: String,
      default: () => "20",
    },
    isMerge: {
      type: Boolean,
      default: () => false,
    },
    allAlign: {
      type: String,
      default: () => "space-between",
    },
  },

  data() {
    return {
      pickerKey: 0,
    };
  },

  computed: {
    mergeList() {
      // 合并的排法 按钮和其他选项全部一起排
      if (this.isMerge) {
        return [this.headerConfig, []];
      } else {
        // 不合并的排法
        return [
          this.headerConfig.filter((i) => i.type !== "button"),
          this.headerConfig.filter((i) => i.type === "button"),
        ];
      }
    },
  },

  watch: {
    form() {
      this.pickerKey++;
    },
  },

  mounted() {},

  methods: {
    emitMethod(value) {
      this.$emit(value);
    },
  },
};
</script>

<style lang="scss">
.config-table-header {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  font-size: 13px;
  .table-header-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    // .ivu-input-with-suffix {
    //   padding-left: 32px !important;
    // }
    // .ivu-input-suffix {
    //   left: 0 !important;
    //   right: 0 !important;
    // }
  }
}
</style>
